<template>
  <view style="display: flex; flex-direction: column; row-gap: 28rpx">
    <view
      v-for="item of list"
      style="
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 20rpx;
        padding: 20rpx;
      "
    >
      <!--全部-->
      <view style="display: flex">
        <image :src="item.imageUrl" style="width: 166rpx; height: 166rpx" />
        <view
          style="
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-left: 22rpx;
            row-gap: 12rpx;
          "
        >
          <view style="font-size: 28rpx; color: #333">{{ item.title }}</view>
          <view style="font-size: 28rpx; color: #333"
            >开场时间{{ item.startTime }}</view
          >
          <view style="display: flex; justify-content: space-between">
            <view style="font-size: 28rpx; color: #333"
              >位置{{ item.location }}</view
            >
            <view
              style="display: flex; align-items: flex-end; column-gap: 8rpx"
            >
              <view style="font-size: 28rpx; line-height: 40rpx; color: #ff2323"
                >¥</view
              >
              <view
                style="font-size: 48rpx; line-height: 58rpx; color: #ff2323"
                >{{ item.price }}</view
              >
            </view>
          </view>
        </view>
      </view>
      <view
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 28rpx;
        "
      >
        <view style="display: flex; flex-direction: column">
          <view style="font-size: 24rpx; color: #999"
            >订单编号:{{ item.num }}</view
          >
          <view style="font-size: 24rpx; color: #999"
            >下单时间:{{ item.createTime }}</view
          >
        </view>
        <view
          style="
            padding: 14rpx 38rpx;
            border-radius: 48rpx;
            font-size: 24rpx;
            line-height: 34rpx;
            font-weight: bold;
          "
          :style="{
            backgroundColor: item.payType === 'isUsed' ? '#DFDFDF' : '#fbd632',
            color: item.payType === 'isUsed' ? '#B8B8B8' : '#333',
          }"
        >
          <view v-if="item.payType === 'waitPay'">立即支付</view>
          <view v-if="item.payType === 'waitUse'" @click="waitUseGo(item)"
            >立即核销</view
          >
          <view v-if="item.payType === 'isUsed'" @click="isUsedGo(item)"
            >已核销</view
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: "order-list",
  props: {
    /**
     * @type {ListItem[]}
     */
    list: {
      type: Array,
    },
  },
  methods: {
    waitUseGo(item) {
      this.$emit("wait-use-go", item);
    },
    isUsedGo(item) {
      this.$emit("is-used-go", item);
    },
  },
};
</script>
